<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="x-UA-Compatible" content="ie=Edge">
   	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Crafty - 2D 绘图</title>
	<link rel="shortcut icon" href="../favicon.ico">
	<link type="text/css" rel="stylesheet" href="../craftyjs-site.css" />
</head>
<body>
	<div id = "header-background"> </div>
	<div id = "page-frame">
	<div id="header">
		<nav class="navbar">
  			<div class="container-fluid">
  				<div class="navbar-header">
  					<a class="navbar-brand" href="../"> <img class="logo" src="../images/text-logo.png" /> </a>
  					
				</div>
				<div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1">
					<ul class="nav navbar-nav">
						<li><a href="../">首页</a></li>
						<li><a href="../getting-started/">快速开始</a></li>
						<li><a href="../documentation/">文档</a></li>
						<li><a href="../api/">API</a></li>
						<li><a href="../components/">组件</a></li>
						<li class="emph"><a href="../#install">下载</a></li>
					</ul>
				</div>
			</div>
		</nav>
	</div>


	<div id="main">
		<div id="content" class="container">
			
<div id="docs">
	<div id='doc-nav'>
		<ul id='doc-level-one'>
			<li>
				Topics
				<ul>
					<li>
						<a href='../documentation/'>
							文档
						</a>
					</li>
					<li>
						<a href='../documentation/entities.html'>
							实体
						</a>
					</li>
					<li>
						<a href='../documentation/events.html'>
							事件
						</a>
					</li>
					<li>
						<a href='../documentation/components.html'>
							组件
						</a>
					</li>
					<li>
						<a href='../documentation/2d.html'>
							2D绘图
						</a>
					</li>
					<li>
						<a href='../documentation/text.html'>
							文本
						</a>
					</li>
					<li>
						<a href='../documentation/keyboard.html'>
							键盘
						</a>
					</li>
					<li>
						<a href='../documentation/mouse.html'>
							鼠标
						</a>
					</li>
					<li>
						<a href='../documentation/sound.html'>
							声音
						</a>
					</li>
					<li>
						<a href='../documentation/sprites.html'>
							精灵
						</a>
					</li>
					<li>
						<a href='../documentation/scenes.html'>
							场景
						</a>
					</li>
					<li>
						<a href='../documentation/gameloop.html'>
							游戏循环
						</a>
					</li>
				</ul>
			</li>
		</ul>
	</div>
	<div id='doc-content' class="markdown">
		

		<h2> 2D 绘图 </h2>
<p>使用 Crafty 展示一个简单的方块是很容易的。(在完整的游戏中你可能想用的是精灵而不是方块，但它们作为功能展示还是很有用的，所以我们会在后续的例子中继续使用它们。)</p>
<pre><code>Crafty.init(<span class="hljs-number">400</span>, <span class="hljs-number">400</span>);
<span class="hljs-keyword">var</span> square = Crafty.e(<span class="hljs-string">'2D, Canvas, Color'</span>);
square.attr({
  <span class="hljs-attr">x</span>: <span class="hljs-number">10</span>,
  <span class="hljs-attr">y</span>: <span class="hljs-number">10</span>,
  <span class="hljs-attr">w</span>: <span class="hljs-number">100</span>,
  <span class="hljs-attr">h</span>: <span class="hljs-number">100</span>
}).color(<span class="hljs-string">'red'</span>);</code></pre>
<p>现在发生了什么?</p>
<ul>
<li>首先我们使用 Crafty 初始化了一个400像素宽，400像素高的舞台。</li>
<li>然后使用这三个组件创建了一个实体: <code>&quot;2D, Canvas, Color&quot;</code>。任何可显示的实体都需要一个 <code>&quot;2D&quot;</code> 组件和一种渲染方式（Canvas或者DOM），这里我们使用 <code>&quot;Canvas&quot;</code> 渲染。<code>&quot;Color&quot;</code> 组件用来绘制方块的颜色。</li>
<li>最后我们使用 <code>.attr()</code> 函数设置了实体的几个属性，在这个例子中我们设置的是实体的位置和尺寸。和大多数函数一样，, <code>attr()</code> 返回调用它的实体本身, 所以你可以链式的调用实体的 <code>color()</code> 方法设置实体的颜色。</li>
</ul>
<p>非常简单! 现在我们在页面上绘制了一个红色的方块，但是如何才能让它运动起来呢？例如，我们想让盒子旋转起来；如果你看了 <code>&quot;2D&quot;</code> 组件的文档介绍，你会发现它有一个 <code>rotation</code> 属性，但我们如何利用它来制作动画呢？非常简单:我们可以绑定 <code>&quot;EnterFrame&quot;</code> 事件，在每一帧改变实体的 <code>rotation</code> 属性值:</p>
<pre><code>square.bind(<span class="hljs-string">'EnterFrame'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
  <span class="hljs-keyword">this</span>.rotation = <span class="hljs-keyword">this</span>.rotation + <span class="hljs-number">1</span>;
});</code></pre>
<p>现在我们绑定了 <code>&quot;EnterFrame&quot;</code> 事件，它在每一帧都会触发，所以方块会旋转起来。</p>
<p>默认情况下它会以实体的左上角为中心进行旋转，但我们希望的是围绕实体的中心进行旋转。我们可以设置旋转的中心点（这个方法由 <code>&quot;2D&quot;</code> 组件提供）：</p>
<pre><code>square.origin(<span class="hljs-string">"center"</span>)</code></pre>
<p>现在我们把所有的代码放在一起，最终的代码是这样的:</p>
<pre><code>Crafty.init(<span class="hljs-number">400</span>, <span class="hljs-number">400</span>);

<span class="hljs-keyword">var</span> square = Crafty.e(<span class="hljs-string">'2D, Canvas, Color'</span>);
square.attr({
  <span class="hljs-attr">x</span>: <span class="hljs-number">10</span>,
  <span class="hljs-attr">y</span>: <span class="hljs-number">10</span>,
  <span class="hljs-attr">w</span>: <span class="hljs-number">100</span>,
  <span class="hljs-attr">h</span>: <span class="hljs-number">100</span>
}).color(<span class="hljs-string">'red'</span>);

square.origin(<span class="hljs-string">"center"</span>)

square.bind(<span class="hljs-string">'EnterFrame'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
  <span class="hljs-keyword">this</span>.rotation = <span class="hljs-keyword">this</span>.rotation + <span class="hljs-number">1</span>;
});</code></pre>
<p>下方是演示代码! </p>
<p><a class="jsbin-embed" href="http://jsbin.com/rakituvoso/1/embed?js,output">JS Bin</a><script src="http://static.jsbin.com/js/embed.js"></script></p>
<p>上边的脚本是可编辑的，试着在 <code>&quot;EnterFrame&quot;</code> 中增加代码 <code>this.x = this.x+1;</code> 让方块向右侧移动。</p>
	</div>
</div>
			
		</div>
	</div>
	<div class="clearer"></div>
	<div id="footer">
		<div id="contact">
			<a href="https://groups.google.com/forum/#!forum/craftyjs">
				<img src="../images/google.png" />
				google groups</a>
			<a href="mailto:starwed@gmail.com">
				<img src="../images/email.png" />
				starwed@gmail.com</a>
			<a href="https://github.com/craftyjs/Crafty">
				<img src="../images/github.png" />
				github</a>
		</div>
		<ul>
			<li><a href="../">首页</a></li>
				<li><a href="../getting-started/">快速开始</a></li>
				<li><a href="../documentation/">文档</a></li>
				<li><a href="../api/">API</a></li>
				<li><a href="../components/">组件</a></li>
				<li class="emph"><a href="../#install">下载</a></li>
		</ul>
		<p>
			&copy; Crafty 2010-2015. Crafty is distributed under the <a href="http://en.wikipedia.org/wiki/MIT_License">MIT License</a>.
		</p>
	</div>
</div>
</body>
</html>
